<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>订单详情 - 待确认 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f0f2f5; }
        .phone-frame { width: 375px; height: 812px; background: #000; border-radius: 40px; padding: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.2); position: relative; overflow: hidden; }
        .phone-screen { width: 100%; height: 100%; background: white; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
        .content-area { flex: 1; overflow-y: auto; padding-bottom: 80px; }
        .content-area::-webkit-scrollbar { width: 4px; }
        .content-area::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 2px; }
        .order-type-tag { padding: 1px 6px; background: #EFF6FF; border-radius: 3px; font-size: 11px; color: #3B82F6; margin-right: 6px; }
        .order-type-tag.rank { background: #eff6ff; color: #2563eb; }
        .order-type-tag.practice { background: #f0fdf4; color: #22c55e; }
        .order-type-tag.other { background: #f3f4f6; color: #6b7280; }
        .order-status-badge { padding: 1px 6px; font-size: 11px; font-weight: bold; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); background: #fef9c3; color: #f59e42; margin-left: 4px; }
        .info-label { color: #6B7280; font-size: 14px; }
        .info-value { color: #1F2937; font-size: 14px; text-align: right; }
        .price-value { color: #EF4444; font-weight: bold; }
        .section-title { display: flex; align-items: center; font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px; }
        .section-title i { margin-right: 8px; }
        .copy-btn { margin-left: 8px; color: #94a3b8; cursor: pointer; transition: color 0.2s; }
        .copy-btn.copied { color: #22c55e; }
        .copy-btn:hover { color: #2563eb; }
        .proof-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
        .proof-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid #e5e7eb; cursor: pointer; }
        .bottom-btn-red { flex: 1; background: #ef4444; color: #fff; border-radius: 9999px; font-size: 16px; font-weight: 500; padding: 12px 0; margin-right: 12px; transition: background 0.2s; }
        .bottom-btn-red:hover { background: #dc2626; }
        .bottom-btn-blue { flex: 1; background: #3B82F6; color: #fff; border-radius: 9999px; font-size: 16px; font-weight: 500; padding: 12px 0; transition: background 0.2s; }
        .bottom-btn-blue:hover { background: #2563eb; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="flex-shrink-0 flex items-center z-10">
                    <button class="p-2 -ml-2 focus:outline-none" onclick="window.history.back()">
                        <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                </div>
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">订单详情</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="更多">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区域 -->
            <div class="content-area">
                <div class="p-4">
                    <!-- 顶部价格和类型标签区 -->
                    <div class="flex items-start justify-between mb-1">
                        <div class="text-2xl font-bold text-red-500">¥100.0</div>
                        <div class="flex items-center gap-2">
                            <span class="order-type-tag rank">排位</span>
                            <span class="order-status-badge">待确认</span>
                        </div>
                    </div>
                    <!-- 订单标题 -->
                    <div class="text-xl font-bold text-black text-left mb-2 leading-tight">代练青铜到黄金，要求24小时内完成，效率保证</div>
                    <!-- 三大关键信息横向卡片 -->
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <div class="rounded-lg bg-orange-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-orange-500">¥50.0</div>
                            <div class="text-xs text-gray-500 mt-1">安全保证金</div>
                        </div>
                        <div class="rounded-lg bg-green-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-green-500">¥50.0</div>
                            <div class="text-xs text-gray-500 mt-1">效率保证金</div>
                        </div>
                        <div class="rounded-lg bg-blue-50 flex flex-col items-center justify-center py-3">
                            <div class="text-lg font-bold text-blue-500">24小时</div>
                            <div class="text-xs text-gray-500 mt-1">代练时限</div>
                        </div>
                    </div>
                    <!-- 订单详细信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex flex-col gap-1 text-sm text-gray-700">
                            <div><span class="font-medium text-gray-500">区服：</span>安卓-QQ - 默认服</div>
                            <div><span class="font-medium text-gray-500">段位要求：</span>青铜Ⅲ → 黄金Ⅰ</div>
                        </div>
                    </div>
                    <!-- 基本信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-clipboard-list text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">基本信息</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">订单号</span>
                                <span class="flex items-center">
                                    <span id="order-id" class="text-gray-700" style="user-select:all;">202406010001</span>
                                    <button id="copy-order-id" class="ml-2 text-gray-400 hover:text-blue-500 focus:outline-none" title="复制订单号">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                            <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
                                        </svg>
                                    </button>
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">接单时间</span>
                                <span class="text-gray-700">2024-06-01 12:30</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">发单时间</span>
                                <span class="text-gray-700">2024-06-01 12:00</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">发单人</span>
                                <span class="text-gray-700">小明</span>
                            </div>
                        </div>
                    </div>
                    <!-- 账号信息卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-user-shield text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">账号信息</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏账号</span>
                                <span class="flex items-center">
                                    <span id="game-account" class="text-gray-700">123456789</span>
                                    <button class="copy-btn ml-2" data-copy-target="game-account" title="复制账号">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                            <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
                                        </svg>
                                    </button>
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏密码</span>
                                <span class="flex items-center">
                                    <span id="game-password" class="text-gray-700">123456</span>
                                    <button class="copy-btn ml-2" data-copy-target="game-password" title="复制密码">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                            <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
                                        </svg>
                                    </button>
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">游戏角色名</span>
                                <span class="text-gray-700">三角洲战士</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">号主手机</span>
                                <span class="text-gray-700">13812345678</span>
                            </div>
                        </div>
                    </div>
                    <!-- 特别说明卡片 -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-info-circle text-yellow-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">特别说明</span>
                        </div>
                        <div class="text-sm text-gray-700">
                            这里是发单时填写的特别说明内容。
                        </div>
                    </div>
                    <!-- 代练师卡片 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-2">
                        <div class="flex items-center mb-3">
                            <i class="fas fa-user-tie text-blue-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">代练师</span>
                        </div>
                        <div class="flex items-center gap-3 mb-2">
                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=王者代练&backgroundColor=b6e3f4" alt="代练师头像" class="w-10 h-10 rounded-full border border-gray-200">
                            <span class="font-semibold text-gray-900 text-base">王者代练</span>
                            <span class="ml-2 px-2 py-0.5 bg-yellow-400 text-white text-xs rounded-full font-semibold">黄金</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">完成订单</span>
                                <span class="text-gray-700 font-medium">128</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">接单时间</span>
                                <span class="text-gray-700 font-medium">2024-06-01 12:30</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">联系电话</span>
                                <span class="flex items-center gap-2">
                                    <span class="text-gray-700 font-mono">13812345678</span>
                                    <a href="tel:13812345678" class="px-2 py-1 bg-blue-500 text-white rounded text-xs flex items-center gap-1 hover:bg-blue-600 transition-colors">
                                        <i class="fas fa-phone-alt"></i>拨打
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- 完成凭证卡片（新增） -->
                    <div class="bg-white rounded-xl p-3 shadow-sm mb-2">
                        <div class="flex items-center mb-2">
                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
                            <span class="font-bold text-base text-gray-800">完成凭证</span>
                        </div>
                        <div class="flex flex-col gap-2 text-sm">
                            <div class="flex items-center">
                                <span class="text-gray-500 mr-2">完成提示语：</span>
                                <span class="text-gray-700">已完成代练，请查收~</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-500 mr-2">完成时间：</span>
                                <span class="text-gray-700">2024-06-05 18:30</span>
                            </div>
                            <div class="flex items-start">
                                <span class="text-gray-500 mr-2 mt-1">完成截图：</span>
                                <div class="proof-imgs">
                                    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=400&h=400&q=80" class="proof-thumb" onclick="showImg(this.src)" />
                                    <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=400&h=400&q=80" class="proof-thumb" onclick="showImg(this.src)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部操作栏 -->
            <div class="bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between gap-3">
                <button class="bottom-btn-red" onclick="alert('已拒绝完成，订单将回到进行中状态')">拒绝完成</button>
                <button class="bottom-btn-blue" id="agreeBtn">确认完成</button>
            </div>
        </div>
    </div>
    <!-- 同意完成确认弹窗 -->
    <div id="agreeModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40" style="display:none;">
        <div class="bg-white rounded-xl shadow-lg w-80 max-w-[90vw] p-6 flex flex-col items-center">
            <div class="text-lg font-bold text-gray-900 mb-3">确认完成</div>
            <div class="text-gray-700 text-sm mb-4 w-full text-left leading-relaxed">
                确认完成后订单将开始结算款项，是否确认完成？
            </div>
            <div class="flex w-full gap-3 mt-2">
                <button id="agreeConfirmBtn" class="flex-1 py-2 bg-blue-500 text-white rounded-full text-base font-medium hover:bg-blue-600 transition-colors">确认</button>
                <button id="agreeCancelBtn" class="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full text-base font-medium hover:bg-gray-300 transition-colors">取消</button>
            </div>
        </div>
    </div>
    <script>
    // 订单号复制功能
    document.addEventListener('DOMContentLoaded', function() {
        var copyBtn = document.getElementById('copy-order-id');
        var orderIdSpan = document.getElementById('order-id');
        if(copyBtn && orderIdSpan) {
            copyBtn.onclick = function() {
                var text = orderIdSpan.innerText.replace('订单号：', '').trim();
                navigator.clipboard.writeText(text).then(function() {
                    copyBtn.title = '已复制';
                    copyBtn.classList.add('text-green-500');
                    setTimeout(function(){
                        copyBtn.title = '复制订单号';
                        copyBtn.classList.remove('text-green-500');
                    }, 1200);
                });
            };
        }
        // 同意完成弹窗逻辑
        var agreeBtn = document.getElementById('agreeBtn');
        var agreeModal = document.getElementById('agreeModal');
        var agreeConfirmBtn = document.getElementById('agreeConfirmBtn');
        var agreeCancelBtn = document.getElementById('agreeCancelBtn');
        agreeBtn.onclick = function() {
            agreeModal.style.display = 'flex';
        };
        agreeCancelBtn.onclick = function() {
            agreeModal.style.display = 'none';
        };
        agreeConfirmBtn.onclick = function() {
            agreeModal.style.display = 'none';
            alert('已同意完成，订单将结算');
        };
        // 图片放大预览
        document.querySelectorAll('.proof-thumb').forEach(function(img){
            img.onclick = function() {
                const win = window.open();
                win.document.write('<img src="'+img.src+'" style="width:100%">');
            };
        });
    });
    </script>
</body>
</html> 